<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>任务树选中效果测试</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 从taskbreakdown.css复制的样式 */
        :root {
            --primary-color: #3498db;
            --secondary-color: #2ecc71;
            --danger-color: #e74c3c;
            --warning-color: #f39c12;
            --info-color: #9b59b6;
            --light-color: #ecf0f1;
            --dark-color: #2c3e50;
            --border-color: #ddd;
            --shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f7fa;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            border-radius: 8px;
            padding: 30px;
            box-shadow: var(--shadow);
        }

        h1 {
            color: var(--dark-color);
            margin-bottom: 30px;
            text-align: center;
        }

        .demo-section {
            margin-bottom: 40px;
        }

        h2 {
            color: var(--primary-color);
            border-bottom: 2px solid var(--border-color);
            padding-bottom: 10px;
            margin-bottom: 20px;
        }

        /* 任务节点样式 */
        .task-node {
            margin: 5px 0;
            padding: 10px;
            background: #f8f9fa;
            border-radius: 4px;
            border-left: 4px solid var(--primary-color);
            cursor: pointer;
            transition: all 0.3s;
            position: relative;
        }

        .task-node:hover {
            background: #e9ecef;
            transform: translateX(5px);
        }

        /* 任务激活动画效果 */
        .task-node.task-activating {
            animation: activate-pulse 0.3s ease-out;
            transform: scale(1.02);
        }

        @keyframes activate-pulse {
            0% {
                transform: scale(1);
                box-shadow: 0 0 0 rgba(46, 204, 113, 0);
            }
            50% {
                transform: scale(1.05);
                box-shadow: 0 0 20px rgba(46, 204, 113, 0.5);
            }
            100% {
                transform: scale(1.02);
                box-shadow: 0 0 10px rgba(46, 204, 113, 0.3);
            }
        }

        /* 选中状态样式 */
        .task-node.selected {
            background: #e3f2fd;
            border-left-color: var(--secondary-color);
            animation: pulse-glow 2s infinite;
            box-shadow: 0 0 15px rgba(46, 204, 113, 0.3);
            position: relative;
        }

        /* 脉冲光晕动画 */
        @keyframes pulse-glow {
            0% {
                box-shadow: 0 0 5px rgba(46, 204, 113, 0.3);
            }
            50% {
                box-shadow: 0 0 20px rgba(46, 204, 113, 0.6);
            }
            100% {
                box-shadow: 0 0 5px rgba(46, 204, 113, 0.3);
            }
        }

        /* 旋转动画 */
        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        /* 任务标题容器 */
        .task-node-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .task-node-title-container {
            display: flex;
            align-items: center;
            gap: 8px;
            flex: 1;
        }

        .task-node-title {
            font-weight: 500;
        }

        .task-selected-indicator {
            display: none;
            color: var(--secondary-color);
            font-size: 12px;
            width: 16px;
            height: 16px;
            align-items: center;
            justify-content: center;
        }

        /* 只有直接选中的任务才显示图标 */
        .task-node.selected > .task-node-header > .task-node-title-container > .task-selected-indicator {
            display: flex;
            animation: spin 1s linear infinite;
        }

        /* 只有直接选中的任务才改变标题样式 */
        .task-node.selected > .task-node-header > .task-node-title-container > .task-node-title {
            color: var(--secondary-color);
            font-weight: 600;
            animation: title-pulse 2s infinite;
        }

        @keyframes title-pulse {
            0% {
                opacity: 1;
            }
            50% {
                opacity: 0.8;
            }
            100% {
                opacity: 1;
            }
        }

        /* 任务元数据 */
        .task-node-meta {
            display: flex;
            gap: 10px;
        }

        .task-status-badge {
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
        }

        .status-planning {
            background: #95a5a6;
            color: white;
        }

        .status-in-progress {
            background: #3498db;
            color: white;
        }

        .status-completed {
            background: #2ecc71;
            color: white;
        }

        /* 进度条 */
        .task-progress-bar {
            height: 4px;
            background: #e0e0e0;
            border-radius: 2px;
            margin-top: 8px;
            overflow: hidden;
        }

        .task-progress-fill {
            height: 100%;
            background: var(--secondary-color);
            transition: width 0.3s;
        }

        /* 控制按钮 */
        .controls {
            display: flex;
            gap: 10px;
            margin-top: 20px;
        }

        button {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            background: var(--primary-color);
            color: white;
            cursor: pointer;
            font-weight: 500;
            transition: background 0.3s;
        }

        button:hover {
            background: #2980b9;
        }

        button.secondary {
            background: var(--secondary-color);
        }

        button.secondary:hover {
            background: #27ae60;
        }

        .instructions {
            background: #f8f9fa;
            border-left: 4px solid var(--primary-color);
            padding: 15px;
            margin-top: 30px;
            border-radius: 4px;
        }

        .instructions h3 {
            margin-top: 0;
            color: var(--dark-color);
        }

        .instructions ul {
            margin: 10px 0;
            padding-left: 20px;
        }

        .instructions li {
            margin: 5px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>任务树选中效果测试</h1>

        <div class="demo-section">
            <h2>任务节点示例</h2>
            <div id="taskTree">
                <!-- 任务节点将通过JavaScript动态生成 -->
            </div>

            <div class="controls">
                <button onclick="selectTask(1)">选中任务1</button>
                <button onclick="selectTask(2)" class="secondary">选中任务2</button>
                <button onclick="clearSelection()">清除选中</button>
            </div>
        </div>

        <div class="instructions">
            <h3>实现的选中效果：</h3>
            <ul>
                <li><strong>脉冲光晕效果</strong>：选中的任务节点会有绿色光晕脉冲动画</li>
                <li><strong>旋转指示器</strong>：左侧有一个旋转的绿色圆点</li>
                <li><strong>标题动画</strong>：任务标题变为绿色并有轻微的透明度变化</li>
                <li><strong>旋转图标</strong>：标题旁边有一个旋转的Font Awesome图标</li>
                <li><strong>激活动画</strong>：点击时会有短暂的缩放和光晕效果</li>
            </ul>
            <p>点击任务节点或使用上面的按钮来测试选中效果。</p>
        </div>
    </div>

    <script>
        // 模拟任务数据
        const tasks = [
            {
                id: 1,
                title: "开发用户登录功能",
                status: "in-progress",
                priority: 2,
                progress: 65
            },
            {
                id: 2,
                title: "设计数据库架构",
                status: "completed",
                priority: 1,
                progress: 100
            },
            {
                id: 3,
                title: "编写项目文档",
                status: "planning",
                priority: 3,
                progress: 10
            }
        ];

        let currentSelectedTask = null;

        // 渲染任务树
        function renderTasks() {
            const taskTree = document.getElementById('taskTree');
            taskTree.innerHTML = '';

            tasks.forEach(task => {
                const taskElement = document.createElement('div');
                taskElement.className = 'task-node';
                taskElement.dataset.taskId = task.id;

                const statusClass = `status-${task.status.replace('-', '')}`;
                const statusText = getStatusText(task.status);
                const priorityText = getPriorityText(task.priority);

                taskElement.innerHTML = `
                    <div class="task-node-header">
                        <div class="task-node-title-container">
                            <span class="task-selected-indicator">
                                <i class="fas fa-circle-notch"></i>
                            </span>
                            <div class="task-node-title">${task.title}</div>
                        </div>
                        <div class="task-node-meta">
                            <span class="task-status-badge ${statusClass}">${statusText}</span>
                            <span class="task-priority-badge priority-${task.priority}">${priorityText}</span>
                            <span class="task-progress-text">${task.progress}%</span>
                        </div>
                    </div>
                    <div class="task-progress-bar">
                        <div class="task-progress-fill" style="width: ${task.progress}%"></div>
                    </div>
                `;

                // 添加点击事件
                taskElement.addEventListener('click', (e) => {
                    e.stopPropagation();
                    selectTask(task.id);
                });

                taskTree.appendChild(taskElement);
            });
        }

        // 选中任务
        function selectTask(taskId) {
            console.log(`选中任务: ${taskId}`);

            // 移除之前选中的样式
            document.querySelectorAll('.task-node.selected').forEach(el => {
                el.classList.remove('selected');
                el.classList.remove('task-activating');
            });

            // 添加选中样式
            const taskElement = document.querySelector(`[data-task-id="${taskId}"]`);
            if (taskElement) {
                // 先添加激活动画类
                taskElement.classList.add('task-activating');

                // 短暂延迟后添加选中类，让激活动画先播放
                setTimeout(() => {
                    taskElement.classList.add('selected');
                    taskElement.classList.remove('task-activating');
                }, 300);

                currentSelectedTask = taskId;
                console.log(`任务 ${taskId} 已选中`);
            }
        }

        // 清除选中
        function clearSelection() {
            document.querySelectorAll('.task-node.selected').forEach(el => {
                el.classList.remove('selected');
                el.classList.remove('task-activating');
            });
            currentSelectedTask = null;
            console.log('已清除选中');
        }

        // 辅助函数
        function getStatusText(status) {
            const statusMap = {
                'planning': '规划中',
                'in-progress': '进行中',
                'completed': '已完成',
                'blocked': '阻塞中',
                'cancelled': '已取消'
            };
            return statusMap[status] || status;
        }

        function getPriorityText(priority) {
            const priorityMap = {
                1: '最高',
                2: '高',
                3: '中等',
                4: '低',
                5: '最低'
            };
            return priorityMap[priority] || `优先级${priority}`;
        }

        // 初始化
        document.addEventListener('DOMContentLoaded', () => {
            renderTasks();
            console.log('测试页面已加载');
        });
    </script>
</body>
</html>